<template>
  <div style="max-width:100%;">
    <el-row style="background:#FFFFFF;padding:0px 20px">
      <el-tabs value="bx">
        <el-tab-pane label="保险提醒" name="bx">
          <el-table
          :data="bxMsgs"
          :height="height"
          border
          style="width: 100%;margin-bottom:10px">
          <el-table-column
            prop="chepai"
            label="车牌"
            width="180">
          </el-table-column>
          <el-table-column
            prop="dateBaoxian"
            label="保险日期">
          </el-table-column>

          
        </el-table>

        <!-- 分页 -->
          <el-row style="margin-top:10px;padding-bottom:10px;background:#ffffff">
            <el-pagination
              style="float:right"
              v-if="totalPage"
              background
              layout="prev, pager, next"
              @current-change="pageIndexChange()"
              :current-page.sync="page"
              :page-count="totalPage"
            ></el-pagination>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="保养提醒" name="by">
          <el-table
          :data="byMsgs"
          :height="height"
          border
          style="width: 100%;margin-bottom:10px">
          <el-table-column
            prop="chepai"
            label="车牌"
            width="180">
          </el-table-column>
          <el-table-column
            prop="dateBaoyang"
            label="保养日期">
          </el-table-column>
        </el-table>
        </el-tab-pane>
        <el-tab-pane label="车检提醒" name="cj">
          <el-table
          :data="cjMsgs"
          :height="height"
          border
          style="width: 100%;margin-bottom:10px">
          <el-table-column
            prop="chepai"
            label="车牌"
            width="180">
          </el-table-column>
          <el-table-column
            prop="dateChejian"
            label="车检日期">
          </el-table-column>
        </el-table>
        </el-tab-pane>
      </el-tabs>
      <!-- <el-row style="min-height:275px;text-align:center">
        <span style="color:#606266;font-size:14px;margin-top:10px">暂无数据</span>
      </el-row> -->
    </el-row>
  </div>
</template>


<style >
@import "../assets/css/base.css";
</style>



<script>
import {
  getRequestHeader,
  loginApi,
  getThirdCompanyApi,
  updateUserApi,
  addUserApi,
  getAllReviewersApi,
  getAllUserListApi
} from "../api/user.js";
import {
  getNowFormatDate,
  getWeekToday,
  isBlankApi,
  logxApi
} from "../api/util.js";
import { getAllpartmentsAll } from "../api/partment";
import { Loading } from "element-ui";
export default {
  data() {
    return {
      mDelDialog: false,
      mTableData: [],
      mPartments: [],
      page: 0,
      mUIpage: 0,
      totalPage: 0,
      pagesize: 10,
      mTableLoading: false,
      mSelectRow: {},
      mCloseDialog: false,
      mMdfyRowDialog: false,
      mAddRowDialog: false,
      mUpPartmentId: 0,
      mAddRowForm: {
        addType: "1"
      },
      mReviewers: [],
      mNextPartmentDialog: false,
      mNextPartment: [],
      mNextRow: undefined,
      mFilter: {
        role: "all"
      }
    };
  },
  created() {},
  mounted() {},
  methods: {
    showFullLoading() {
      this.mFullLoading = Loading.service({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },
    clsoeFullLoading() {
      if (this.mFullLoading) {
        this.mFullLoading.close();
      }
    },
    pageIndexChange(){
      this.refreshData()
    },
    refreshData(){
      this.getNoticeMsg('baoxian')
      this.getNoticeMsg('baoyang')
      this.getNoticeMsg('chejian')
    },
    getNoticeMsg(type) {
      var that = this;
      getCarNoticeApi(
        type,
        this.page,
        10,
        getRequestHeader(),
        new (function () {
          this.success = function (data) {
            that.page = data.currentPage;
            that.totalPage = data.totalPage;
            if(type == 'baoxian'){
              that.bxMsgs = data.list
            }else if(type == 'baoyang'){
              that.byMsgs = data.list
            }else if(type == 'chejian'){
              that.cjMsgs = data.list
            }
          };
          this.fail = function (msg) {
            if(type == 'baoxian'){
              that.bxMsgs = []
            }else if(type == 'baoyang'){
              that.byMsgs = []
            }else if(type == 'chejian'){
              that.cjMsgs = []
            }
          };
        })()
      );
    },

    //----------over mroethods------
  }
};
</script>